<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">
				<view class="action sub-title">
					<text class="text-xl text-bold text-white">登录</text>
					<text class="text-ABC text-white">login</text>
				</view>
			</block>
		</cu-custom>
		
		<view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index>step?'':'text-blue'" v-for="(item,index) in basicsList" :key="index">
					<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
				</view>
			</view>
		</view>
		
		<template v-if="step==0">
			
			<view v-if="isRegister">
				
			</view>
			
			<view v-if="isRegister"> 
				<view class="cu-bar bg-white solid-bottom margin-top-xs">
					<view class="action">
						<text class="cuIcon-title text-cyan"></text>请把身份证放在指定设备上检查
					</view>
				</view>
				
				<view class="flex justify-center bg-white">
					<image src="/static/images/OCR/idcard1.png" mode=""></image>
				</view>
				<form action="" class="text-grey">
					<view class="cu-form-group">
						<view class="title">姓名</view>
						<input type="text" v-model="userInfo.Name"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">证件号</view>
						<input type="text" v-model="userInfo.IdentityNo"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">签发机关</view>
						<input type="text"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">有效期限</view>
						<input type="text"></input>
					</view>
					<view class="padding-xl">
						<button class="cu-btn block bg-blue lg" @click="reqUserInfo">身份证测试</button>
					</view>
					
				</form>
			</view>
			
		</template>
		
		<template v-if="step==1">
			<view class="cu-bar bg-white  margin-top-xs">
				<view class="action">
					<text class="cuIcon-title text-cyan"></text>请对准摄像头拍照
				</view>
			</view>
			<view class="bg-white padding ">
				<!-- 拍照功能。。。 -->
				<view class="grid col-4 grid-square flex-sub justify-center">
					<view class="solids" @tap="ChooseImage('imgList')">
						<text class='cuIcon-cameraaddfill'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group margin-top-xs">
				<textarea :value="imageInfo"  />
			</view>
		</template>
		
		<template v-if="step==2">
			<view class="cu-bar bg-white solid-bottom margin-top-xs">
				<view class="action">
					<text class="cuIcon-title text-cyan"></text>恭喜你识别成功
				</view>
			</view>
			<view class="cu-load load-modal" v-if="loadModal">
				<!-- <image src="/static/logo.png" mode="aspectFit"></image> -->
		
				<view class="gray-text">登录中...</view>
			</view>
		</template>
		
		<view class="cu-bar bg-white solid-bottom margin-top-xs" style="flex-direction: row-reverse" v-if="step!=2">
			<view class="action" >
				<button class="cu-btn bg-cyan shadow" @tap="BasicsSteps">下一步</button>
			</view>		
		</view>
			
		
	</view>
</template>

<script>
	let _this = null
	import { urlTobase64 } from "@/common/utils/common.js"
	import { faceRecognition } from '@/common/api/recognition.js'
	import { getUserInfo } from '@/common/api/user.js'
	export default {
		data() {
			return {
				isRegister: true, // 是否登录过
				userInfo: {
					Userid: '',
					IdentityNo: '371726199108057664',
					Name: '小明',
					IsLimit: true,
				},
				basicsList: [
					{
						cuIcon: 'newsfill',
						name: '刷身份证'
					}, {
						cuIcon: 'recordfill',
						name: '人脸比对'
					}, {
						cuIcon: 'roundcheckfill',
						name: '完成'
				}],
				
				step: 0,
				loadModal: false,
				imageInfo: ''
			}
		},
		created () {
			_this = this;
			this.reqUserInfo()
		},
		methods: {
			BasicsSteps() {
				this.step= this.step == this.basicsList.length - 1 ? 0 : this.step + 1;	
				this.$nextTick(() => {
					if (_this.step ==2) {
						setTimeout(() => {
							_this.loadModal = true;
						}, 500)
						setTimeout(() => {
							_this.loadModal = false;
							uni.switchTab({
								url:"/pages/index/index"
							})
						}, 1000)
					}
					
				})
			},
			// 请求用户信息
			reqUserInfo() {
				getUserInfo(this.userInfo).then(({data}) => {					
					if (data.msgcode == 1000) {
						// 可以创建网签
						if (data.data.IsLimit) {
							this.showToast('你没有权限登录')							
						} else {
							this.$store.commit('user/addUserList', data.data)
						}
					} else {
						this.showToast(data.msg, 'none', 2000)
					}
				}).catch(err => {
				})
			},
			
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], // camera 从相机选择， album 从相册选择 
					success: (res) => {
						// this.imageInfo = JSON.stringify(res);
						// console.log('imageInfo', (res))
						let imageSrc = res.tempFilePaths[0]						
						urlTobase64(imageSrc, false).then(data => {
							let base64 = data;
							let opts = {
								"groupId": 71,
								"image": base64,
								"limit": 3,
								"threshold": 10
							}
							
							uni.showLoading({
								title: "识别中"
							})
							
							// 人脸识别
							faceRecognition(opts)
								.then(({data}) => {
									console.log('--------------- 识别成功 --------------\n', data)
									 this.imageInfo = JSON.stringify(data);
									 if (data.resp_code === 0) {
										 let photos = data.datas.photos
										  uni.showToast({
										 	title:"识别成功"
										 })
									 }
									
								})
								.catch(err => {
									console.log('--------------- 识别失败 --------------\n', err)

									uni.showToast({
										title:"识别失败，请重试",
										icon: "none",
										duration:2000
									})
									this.imageInfo = JSON.stringify(err);
								})
								.then(() => {
									uni.hideLoading();
								})
						})

						

						// 上传图片
						/*uni.uploadFile({
							url: _this.baseUplaodUrl+'/clientauth/user/upload',
							// url: 'https://unidemo.dcloud.net.cn/upload',
							filePath: imageSrc,
							header: _this.headers,
							fileType: 'image',
							name: 'file',
							success: (res) => {
								console.log('提交成功>>', res)
							},
							fail: (err) => {
								// console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});*/
					}
				});
			},
		}
	}
</script>

<style scoped>
.cu-form-group .title {
	min-width: calc(4em + 15px);
}
</style>
